<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/system" replace>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>银生宝银行卡</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">银行限额表</div>
      <div class="searchBox">
        <el-form :model="searchObject" size="mini" inline>
          <div class="block">
            <el-form-item label="请输入要查询的银行卡名称">
              <el-input v-model="searchObject.bankName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" circle @click="search"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="" label="编号" align="center"></el-table-column>
        <el-table-column prop="bankName" label="银行名称" align="center"></el-table-column>
        <el-table-column prop="" label="银行卡bin" align="center"></el-table-column>
        <el-table-column prop="" label="银行卡单笔限额" align="center"></el-table-column>
        <el-table-column prop="" label="银行卡单日限额" align="center"></el-table-column>
        <el-table-column label="银行卡图标url" align="center">
          <template slot-scope="data">
            <img :src="data.row.url" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <el-button type="primary" size="mini" @click="update(data.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :maxTotal="maxTotal" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange"></pagination>
      <div class="updateBank" v-if="showBankInfo">
        <el-form size="mini" :model="bankLimitInfo" label-width="150px">
          <el-form-item label="银行卡名称:">
            <el-input v-model="bankLimitInfo.bankName"></el-input>
          </el-form-item>
          <el-form-item label="单笔限额:">
            <el-input v-model="bankLimitInfo.sigleLimit"></el-input>
          </el-form-item>
          <el-form-item label="单日限额:">
            <el-input v-model="bankLimitInfo.dayLimit"></el-input>
          </el-form-item>
          <el-form-item label="银行卡图标:">
            <img width="32" height="32" :src="bankLimitInfo.iconUrl" alt="">
            <el-input v-model="bankLimitInfo.iconUrl"></el-input>
            <el-upload class="upload-demo" :show-file-list="false" drag
                       action="https://jsonplaceholder.typicode.com/posts/"
                       :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import pagination from 'components/pagination'

  export default {
    data () {
      return {
        maxTotal: 20,
        searchObject: {},
        tableData: [],
        bankLimitInfo: {},
        showBankInfo: false
      }
    },
    created () {
    },
    methods: {
      search () {
      },
      onSubmit () {
      },
      handleSuccess (res, file) {
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      update (item) {
        this.bankLimitInfo = item
        this.showBankInfo = !this.showBankInfo
      }
    },
    components: {
      pagination
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
.updateBank{
  .el-form{
    .el-form-item{
      .el-input{
        width: 50%;
      }
      .upload-demo{
        margin-top: 15px;
      }
    }
  }
}
</style>
